<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%> 
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>VIP管理</title>
 	<base href="${Context}">
    <link rel="stylesheet" type="text/css" href="css/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/theme/mobile.css">
    <link rel="stylesheet" type="text/css" href="css/theme/color.css">
    <link rel="stylesheet" type="text/css" href="css/theme/icon.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.mobile.js"></script>
    <style type="text/css">
        .InfoText {
            color: #B8860B;
            font-size: 15px;
            font-weight: 500;
        }

        .SaleDialogText {
            font-size: 18px;
        }
        .datagrid-header-row td {
		    background-color: #01FFFF;
		    color: #000;
		}
    </style>
</head>
<body style="height: 100%">
<div class="easyui-navpanel" style="overflow: hidden;height: 100%">
    <table id="TableMember" data-options="header:'#HeaderTableMember',singleSelect:true,fit:true,fitColumns:true,
        pagination:true,scrollbarSize:0,onClickCell:OnClickCell"></table>
    <div id="HeaderTableMember" style="margin-bottom: 1%;">
        <div id="InfoArea" style="background-color: #EAEAEA; padding: 4px 14px;">
                <div class="InfoText"style="line-height: 25px">俱乐部ID：
					<select id="clubIdSelect" class="select" style="line-height: 25px;">
						<c:forEach var="club" items="${clubs }">
							<option value="${club.clubId }" data-clubName="${club.clubName }"  data-clubAdvanceDiamond="${club.clubAdvanceDiamond }"
							 data-clubSize="${club.clubSize }"
							 data-clubManagerId="${club.clubManagerId }"
							 >${club.clubId }</option>
						</c:forEach>
					</select>
				</div>
                <div class="InfoText">俱乐部名：
                    <span id="selectClubName" class="InfoText"></span>
                </div>
            <div class="InfoText">俱乐部人数：<span id="clubSize" class="InfoText"></span></div>
            <div class="InfoText">
            	管理员ID:<span id="managerInfo_Id" class="InfoText">${user.id }</span>
            	<span style="margin-left: 10%;">剩余钻石：<span id="BalanceDiamond" class="InfoText">${user.agentCoin }</span></span>
            	
            </div>
        </div>
        <input id="SearchKey" type="text" placeholder="请输入id或者昵称" maxlength="16" style="width: 35%; height: 30px;">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" style="padding: 0px 10px;"
           onclick="OnClickSearch()">查询</a>
        <a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="OnClickAllMember()">所有成员</a>
        <a href="javascript:void(0)" class="easyui-linkbutton c6" style="padding: 0px 10px;"
           onclick="loadInfoRecord()">账单详情</a>
        <div style="margin-top:1%; border-top: 2px solid black;padding: 2px 14px;font-size: 18px;">
        	<label >每人预支额度：</label><span style="color: red;padding: 0 5px;" id="clubAdvanceDiamond">10</span><a href="javascript:void(0)" class="easyui-linkbutton c1" id="editClubAdvanceDiamondBtn" onclick="openEditDialog($('#clubAdvanceDiamond').html())">修改额度</a>
        </div>
    </div>
     <div id="ModalNote" class="easyui-dialog" style="width:90%;padding:20px;"
         data-options="inline:true,modal:true,closed:true,title:'备注'">
        <div>
            <textarea id="NoteEdit" placeholder="备注..." style="width:100%;height:200px"></textarea>
        </div>
        <div class="dialog-button" style="padding: 20px">
            <a id="NoteOk" href="javascript:void(0)" class="easyui-linkbutton c1" style="width:100%;height:40px;"
               onclick="OnClickNoteOk()">确&nbsp;&nbsp;&nbsp;定</a>
            <a href="javascript:void(0)" class="easyui-linkbutton c2" style="width:100%;height:40px; margin-top: 20px;"
               onclick="$('#ModalNote').dialog('close')">取&nbsp;&nbsp;&nbsp;消</a>
        </div>
    </div>
    
    
    <div id="ModalOpt" class="easyui-dialog" style="width:90%;padding:20px;"
         data-options="inline:true,modal:true,closed:true,title:'成员管理'">
        <div class="SaleDialogText">玩家名称：
            <span id="OptMemberName" class="SaleDialogText"></span>
        </div>
        <div class="SaleDialogText" style="margin-top: 10px">玩家ID：
            <span id="OptMemberId" class="SaleDialogText"></span>
        </div>
        <div class="dialog-button" style="padding: 20px">
            <!---<a href="javascript:void(0)" class="easyui-linkbutton c3" style="width:100%;height:40px;"
               onclick="OnClickAddToBlacklist()">禁止游戏</a>--->
            <a href="javascript:void(0)" class="easyui-linkbutton c5" style="width:100%;height:40px; margin-top: 20px;"
               onclick="OnClickKickOut()">踢出俱乐部</a>
            <a href="javascript:void(0)" class="easyui-linkbutton c2" style="width:100%;height:40px; margin-top: 20px;"
               onclick="$('#ModalOpt').dialog('close')">取&nbsp;&nbsp;&nbsp;消</a>
        </div>
    </div>
    <div id="ModalConfirm" class="easyui-dialog" style="width:80%;padding:20px;"
         data-options="inline:true,modal:true,closed:true,title:'提示'">
        <div id="ModalConfirmContent" style="text-align: center; font-size: 20px;"></div>
        <div class="dialog-button" style="padding: 20px">
            <a id="ModalConfirmBtnOk" href="javascript:void(0)" class="easyui-linkbutton c1"
               style="width:100%;height:40px;">确&nbsp;&nbsp;&nbsp;定</a>
            <a id="ModalConfirmBtnCancel" href="javascript:void(0)" class="easyui-linkbutton c2"
               style="width:100%;height:40px; margin-top: 20px;"
               onclick="$('#ModalConfirm').dialog('close')">取&nbsp;&nbsp;&nbsp;消</a>
        </div>
    </div>
    <div id="ModalChangeAdvance" class="easyui-dialog" style="width:90%;padding:20px;"
         data-options="inline:true,modal:true,closed:true,title:'修改额度'">
        <div class="SaleDialogText">俱乐部名称：
            <span id="ModalclubName" class="SaleDialogText"></span>
        </div>
      	  默认额度：<input id="defValue" type="text" pattern="[0-9]" placeholder="默认额度" style="width: 70%; height: 30px;
        margin-top: 10px;">
        <div class="dialog-button" style="padding: 20px">
            <a href="javascript:void(0)" class="easyui-linkbutton c1" style="width:100%;height:40px;"
               onclick="editAdvanceDiamond()">确&nbsp;&nbsp;&nbsp;定</a>
            <a href="javascript:void(0)" class="easyui-linkbutton c2" style="width:100%;height:40px; margin-top: 20px;"
               onclick="$('#ModalChangeAdvance').dialog('close')">取&nbsp;&nbsp;&nbsp;消</a>
        </div>
    </div>
</div>


   
</body>
<script type="text/javascript">
var sys=sys || {};
sys.context = "${Context}";
sys.contextPath="${ContextPath}";
sys.user=${userJSON};
sys.clubs=${clubsJSON};
    var g_aClubListData = [];
    var g_oClubData = null;
    var g_oAgentInfo = null;

    (function () {
        InitView();

        
        function InitView() {
        	$("#selectClubName").html($("#clubIdSelect option:selected").attr("data-clubName"));
        	$("#clubSize").html($("#clubIdSelect option:selected").attr("data-clubSize"));
        	$("#clubAdvanceDiamond").html($("#clubIdSelect option:selected").attr("data-clubAdvanceDiamond"));
        	var clubId=$("#clubIdSelect").val(),managerId=$("#clubIdSelect option:selected").attr("data-clubManagerId");
        	if(clubId && managerId) InitTable(clubId,managerId);
        	
        	$("#clubIdSelect").on("change",function(){
        		$("#selectClubName").html($("#clubIdSelect option:selected").attr("data-clubName"));
            	$("#clubSize").html($("#clubIdSelect option:selected").attr("data-clubSize"));
            	var clubId=$("#clubIdSelect").val(),managerId=$("#clubIdSelect option:selected").attr("data-clubManagerId");
            	if(clubId && managerId) InitTable(clubId,managerId);
            	
        	});
        }
    })();
	//初始化表格
    function InitTable(clubId,managerId) {
            $('#TableMember').datagrid({
                url: sys.context+'main/getMembers',
                method: 'post',
                queryParams: {
                    'clubId': clubId
                },
                onLoadSuccess: function (data) {
                    $('#clubSize').html(data.total);
                    var pager =  $("#TableMember").datagrid('getPager');	// get the pager of datagrid
                    pager.pagination({layout:['links']});
                },
                onDblClickRow:function(index,data){
                	loadInfoRecord(index,data);
                },
                columns: [
                    [{
                        field: 'playerName',
                        title: '成员',
                        width: 100,
                        align: 'center',
                    }, {
                        field: 'playerId',
                        title: '成员ID',
                        align: 'center'
                    }, {
                        field: 'arrearage',
                        title: '所欠房费',
                        align: 'center',
                        formatter:function(value, row, index){
                        	return value?value:0;
                        }
                    }, {
                        field: 'permit',
                        title: 'VIP状态',
                        width: 50,
                        align: 'center',
                        formatter: function (value, row, index) {
                            if (value) {
                            	 var oBtn = $('<a>').text('开启中').attr('href', 'javascript:void(0)').addClass('c1')
                                 .attr('onclick', 'closeOrOpenPermit(' + row.id + ','+value+')').css('padding', '2px 0px');
		                         oBtn.linkbutton({plain: false});
		                         var oSpan = $('<span>');
		                         oSpan.append(oBtn);
		                         return oSpan.html();
                            	 
                            } else {
                            	 var oBtn = $('<a>').text('已关闭').attr('href', 'javascript:void(0)').addClass('c2')
                           		.attr('onclick', 'closeOrOpenPermit(' + row.id + ','+value+')').css('padding', '2px 0px');
		                          oBtn.linkbutton({plain: false});
		                          var oSpan = $('<span>');
		                          oSpan.append(oBtn);
		                          return oSpan.html();
                            }
                        }
                    }, 
                    {
                        field: '_opt',
                        title: '清空欠费',
                        width: 50,
                        align: 'center',
                        formatter: function (value, row, index) {
                            var oBtn = $('<a>').attr('href', 'javascript:void(0)')
                                    .attr('onclick', 'clearArrearage(' + row.id + ')');
                             oBtn.text('清空').css('padding', '2px 0px').addClass('c1');
                            oBtn.linkbutton({plain: false});
                            var oSpan = $('<span>');
                            oSpan.append(oBtn);
                            return oSpan.html();
                        }
                    }]
                ]
            });
    }

    function OnClickSearch() {
    	var clubId=$("#clubIdSelect").val();
        if (!clubId) {
            console.log('OnClickSearch()-->', 'clubId is null!');
            return;
        }
        var param = $('#SearchKey').val();
        var url= $('#TableMember').datagrid("options")["url"]||sys.context+'main/getMembers';
        $('#TableMember').datagrid({
            url:url,
            method: 'post',
            onLoadSuccess: function (data) {
                console.log(data)
            },
            queryParams: {
                'clubId': clubId,
                'searchKey':param
            }
        });
    }

    function OnClickAllMember() {
        $('#SearchKey').val("");
        var clubId=$("#clubIdSelect").val(),managerId=$("#clubIdSelect option:selected").attr("data-clubManagerId");
    	if(clubId && managerId) InitTable(clubId,managerId);
    }

    function OnClickNote(nIndex) {
        var oDg = $('#TableMember');
        oDg.datagrid('selectRow', nIndex);
        var oRowData = oDg.datagrid('getSelected');
        if (oRowData) {
        	console.log(oRowData);
            $('#NoteOk').attr('data-cur-row', '' + nIndex);
            $('#NoteEdit').val(oRowData.remarks);
            $('#ModalNote').dialog('open').dialog('center');
        }
    }

    function OnClickCell(index, field, value) {
        if ('Comments' == field) {
            OnClickNote(index);
        }
    }


    function OnClickKickOut() {
        function requestKickOut() {
            var nIndex = parseInt($('#ModalOpt').attr('data-idx'));
            var oDg = $('#TableMember');
            oDg.datagrid('selectRow', nIndex);
            var oRowData = oDg.datagrid('getSelected'),clubId=$("#clubIdSelect").val();
            if (!oRowData || !clubId) {
                return;
            }
            var oReqData = {};
            oReqData.clubId = clubId;
            oReqData.playerId = oRowData.playerId;
            $.post(sys.context+'main/kickOutClub',oReqData, function (data) {
            	data=$.parseJSON(data);
            	if(!data["error"]){
	                $.messager.alert("提示", data["msg"]);
	                $('#TableMember').datagrid('reload');
	                $('#ModalConfirm').dialog('close');
	                $('#ModalOpt').dialog('close');
            	}else{
            		$.messager.alert("错误", data["msg"], 'error');
            	}
            }, "text").error(function () {
                $.messager.alert("错误", "操作失败！", 'error');
            });
        }

        var sContent = '是否将' + $('#OptMemberName').html() + '踢出俱乐部';
        modalConfirm(sContent, requestKickOut.bind(this));
    }

    function OnClickSale(nIndex) {
        var oDg = $('#TableMember');
        oDg.datagrid('selectRow', nIndex);
        var oRowData = oDg.datagrid('getSelected');
        if (oRowData) {
            console.log(oRowData)
            $('#SaleNum').val('');
            $('#BuyerName').html(oRowData.playerName);
            $('#BuyerId').html(oRowData.playerId);
            $('#BuyerBalance').html(oRowData.playerDiamond);
            $('#ModalSale').dialog('open').dialog('center');
        }
    }

    function OnClickSaleOk() {
        function requestSale() {
            var nSaleNum = parseInt($('#SaleNum').val());
            if (isNaN(nSaleNum)) {
                $.messager.alert("错误", "发货数量必须为数字！", 'error');
                return;
            }
            var oReqData = {};
            oReqData.playerId = parseInt($('#BuyerId').html());
            oReqData.diamond = nSaleNum;
            oReqData.note = '';
            oReqData.clubId=parseInt($("#clubIdSelect").val());
            $.post(sys.context+'main/agentSendOut',oReqData, function (data) {
            	data=$.parseJSON(data);
            	console.log(data);
            	if(data && !data["error"]){
	                $.messager.alert("提示", data["msg"]);
	                GetAgentInfo();
	                $('#TableMember').datagrid('reload');
	                $('#ModalConfirm').dialog('close');
	                $('#ModalSale').dialog('close');
	                $('#BalanceDiamond').html(data["data"]["agentCoin"]);
            	}else{
            		$.messager.alert("错误", data["msg"], 'error');
            	}
            }, "text").error(function () {
                $.messager.alert("错误", "发货失败！", 'error');
            });
        }

        var sContent = '是否为' + $('#BuyerName').html() + '充值' + $('#SaleNum').val() + '钻石';
        modalConfirm(sContent, requestSale.bind(this));
    }

    function modalConfirm(sContent, fOkCallback) {
        $('input').blur();
        $('#ModalConfirmContent').text(sContent);
        $('#ModalConfirmBtnOk').unbind('click');
        $('#ModalConfirmBtnOk').click(fOkCallback);
        $('#ModalConfirm').dialog('open').dialog('center');
    }

    function FormatterDropClub(oRow) {
        var sHtml = '<p>' + oRow.club_name + '</p>'
        return sHtml;
    }

    $.extend($.messager.defaults,{
        ok:"确定",
        cancel:"取消"
    });

    function changeName(){
        $.messager.prompt('修改', '请输入俱乐部名：', function(r){
            if(r){
                var club_id = $("#ClubId").text();
                $.ajax({
                    type:'get',
                    url:"#"+r,
                    success:function(msg){
                        if('修改成功' == msg){
                            $("#ClubName").text(r);
                        }
                        $.messager.alert("提示", msg);
                    }
                })
            }
        })

    }
    
    function openEditDialog(defV){
    	$("#ModalChangeAdvance").find("#ModalclubName").html($("#selectClubName").html());
    	$("#ModalChangeAdvance").find("#defValue").val(defV).data("oldDefVal",defV);
    	$("#ModalChangeAdvance").dialog('open').dialog('center');
    }
    function editAdvanceDiamond(){
    	
    	var r=$("#ModalChangeAdvance").find("#defValue").val(),oldDefVal=$("#ModalChangeAdvance").find("#defValue").data("oldDefVal");
    	
    	if(!r||!oldDefVal){
			return false;
		}
		if (isNaN(r) || r<1){
			$.messager.alert("提示", "额度不能低于1钻石");
			return false;
		}
		if(oldDefVal==r){
			$.messager.alert("提示", "请输入与原默认额度不同的值!");
			return false;
		}
		var clubId=$("#clubIdSelect").val();
		if(!clubId) return false;
		$.post(sys.context+'main/editDefDiamond',{"diamond":r,"clubId":clubId},function(data){
        	if(data && !data["error"]){
                $.messager.alert("提示", data["msg"]);
                $('#clubAdvanceDiamond').html(r);
                $("#ModalChangeAdvance").dialog('close');
        	}else{
        		$.messager.alert("错误", data["msg"], 'error');
        	}
		},'json');
    }
    function closeOrOpenPermit(id,value){
		if(!id|| value==undefined){
			console.log("closeOrOpenPermit------------->>id  Or  permitValue is null");
			return false;
		}
		var type=value==1?0:1;
		$.post(sys.context+"main/closeOrOpenPermit",{"mappingId":id,"type":type},function(data){
			if(data && !data["error"]){
				$.messager.alert("提示", data["msg"]);
                $('#TableMember').datagrid('reload');
			}else{
				$.messager.alert("错误", data["msg"], 'error');
			}
		},"json").error(function () {
            $.messager.alert("错误", "操作失败！", 'error');
        });
		
	}
    //清空欠费
    function clearArrearage(id){
    	if(!id){
			console.log("clearArrearage------------->>id  is null or undefined");
			return false;
		}
		$.post(sys.context+"main/clearArrearage",{"mappingId":id},function(data){
			if(data && !data["error"]){
				$.messager.alert("提示", data["msg"]);
                $('#TableMember').datagrid('reload');
			}else{
				$.messager.alert("错误", data["msg"], 'error');
			}
		},"json").error(function () {
            $.messager.alert("错误", "操作失败！", 'error');
        });
    }
    
    function loadInfoRecord(index,data){
    	if(data)$("#SearchKey").val(data["playerName"]);
    	 $('#TableMember').datagrid({
             url: sys.context+'main/getMemberRecord',
             method: 'post',
             queryParams: {
                 'clubId': $("#clubIdSelect").val(),
                 'searchKey':$("#SearchKey").val()||''
             },
             onLoadSuccess: function (data) {
                 $('#clubSize').html(data.total);
                 var pager =  $("#TableMember").datagrid('getPager');	// get the pager of datagrid
                 console.log(pager.pagination());
                 pager.pagination({layout:['links']});
             },
             columns: [
                 [{
                     field: 'playerName',
                     title: '成员',
                     width: 100,
                     align: 'center',
                 }, {
                     field: 'consumerId',
                     title: '成员ID',
                     align: 'center'
                 }, {
                     field: 'consumeTime',
                     title: '时间',
                     align: 'center'
                 }, {
                     field: 'roomId',
                     title: '房间号',
                     align: 'center'
                 }, {
                     field: 'orderMoney',
                     title: '需付房费',
                     align: 'center'
                 }]
             ]
         });	 
    }
    
    function recordInfoTable(){
    	
    }
</script>
</html>